<template>
  <l-content :app="app" width="1500px">
    <el-card>
      <el-form :inline="true" size="mini"
               label-width="80px"
               :model="searchForm"
               onkeydown="if(event.keyCode==13){return false;}"
               @keyup.native.enter="onSearch">
        <div>
          <el-form-item label="政策代码" prop="applyPolicyCodes">
            <el-input v-model="searchForm.applyPolicyCodes" class="w180"/>
          </el-form-item>
          <el-form-item label="乘机日期" prop="departDateStart">
            <el-date-picker
              class="w180"
              value-format="yyyy-MM-dd"
              v-model="searchForm.departDateStart"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="乘机止" prop="departDateEnd">
            <el-date-picker
              class="w180"
              value-format="yyyy-MM-dd"
              v-model="searchForm.departDateEnd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="航司" prop="airline">
            <el-select v-model="searchForm.airline" class="w180" filterable placeholder="请选择" clearable>
              <el-option v-for="item in airlineOptions" :key="item.key" :label="item.value" :value="item.key"/>
            </el-select>
          </el-form-item>
          <el-form-item label="舱位" prop="subClass">
            <el-input v-model="searchForm.subClass" class="w180"/>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="规则名称" prop="ruleName">
            <el-input v-model="searchForm.ruleName" class="w180"/>
          </el-form-item>
          <el-form-item label="出发城市" prop="departPort">
            <el-input v-model="searchForm.departPort" class="w180"/>
          </el-form-item>
          <el-form-item label="到达城市" prop="arrivePort">
            <el-input v-model="searchForm.arrivePort" class="w180"/>
          </el-form-item>
          <el-form-item label="规则状态" prop="status">
            <el-select v-model="searchForm.status" class="w180" clearable>
              <el-option value="1" label="启用"/>
              <el-option value="0" label="停用"/>
            </el-select>
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="primary" icon="search" @click="onSearch">查询</el-button>
            <el-button type="primary" icon="plus" @click="onAdd">新增</el-button>
          </el-form-item>
        </div>
      </el-form>
      <!--
        table 根据这个来获取子组件的方法
        tableData 表格数据
        handleSelectionChange 监听选择
        handleCurrentChange 监听翻页事件
        loading 表格加载,！注意，loading的用法和原生的有区别
      -->
      <c-page-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        @select-page="onSelectPage"
        @sort-change="handleSortChange"
        :loading="loading">
        <el-table-column
          type="selection"
          width="50">
        </el-table-column>
        <el-table-column
          prop="ruleName"
          label="规则名称"
          min-width="120">
          <template slot-scope="scope">
            <a href="javascript:void(0)" @click="handleDetail(scope.row)">{{scope.row.ruleName}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="ruleStatusStr"
          label="状态"
          min-width="50">
          <template slot-scope="scope">
            <div>{{scope.row.ruleStatusStr}}</div>
            <div>
              <el-switch
                @change="onChangeRuleStatus(scope.row, $event)"
                v-model="scope.row.ruleStatus"
                active-value="1"
                inactive-value="0">
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="airline"
          label="航司"
          min-width="70">
        </el-table-column>
        <el-table-column
          prop="applyPolicyCodes"
          label="政策代码"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="departPort"
          label="出发城市"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="arrivePort"
          label="到达城市"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="includeFlightNo"
          label="航班号"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="subClass"
          label="舱位"
          min-width="80">
        </el-table-column>
        <el-table-column
          label="乘机起止日期"
          width="95">
          <template slot-scope="scope">
            <div>{{scope.row.departDateStartStr}}/</div>
            <div>{{scope.row.departDateEndStr}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="singleMinProfit"
          label="利润"
          min-width="40">
        </el-table-column>
        <el-table-column
          prop="openChangePnr"
          label="是否换编码"
          min-width="120">
          <template slot-scope="scope">
            {{ scope.row.openChangePnr==0?'不换':(scope.row.openChangePnr==1?'出票成功XE原编码':'换编码出票,但不XE原编码')}}
          </template>
        </el-table-column>
        <el-table-column
          label="有效时间"
          min-width="90">
          <template slot-scope="scope">{{scope.row.startTime}} / {{scope.row.endTime}}</template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>
            <c-pop-button
              size="mini"
              type="danger"
              pMsg="确认要删除吗？"
              @click="btn => handleDelete(btn, scope.row)"
            >删除
            </c-pop-button>
          </template>
        </el-table-column>
        <el-table-column label="优先级" width="150">
          <template slot-scope="scope">
            <template v-if="!(tableData.page === 1 && scope.$index === 0)">
              <easy-button tip="调整至顶层" type="text" size="mini" @click="onMove($event, scope.row.id, scope.row.sortNo, 'top')"><i class="top_icon"></i></easy-button>
              <easy-button tip="调整至上一层" type="text" size="mini" @click="onMove($event, scope.row.id, scope.row.sortNo, 'upOneLevel')"><i class="pre_icon"></i></easy-button>
            </template>
            <template v-if="!(tableData.page === tableData.total && (scope.$index + 1) === tableData.rows.length)">
              <easy-button tip="调整至下一层" type="text" size="mini" @click="onMove($event, scope.row.id, scope.row.sortNo, 'downOneLevel')"><i class="next_icon"></i></easy-button>
              <easy-button tip="调整至底部" type="text" size="mini" @click="onMove($event, scope.row.id, scope.row.sortNo, 'bottom')"><i class="bottom_icon"></i></easy-button>
            </template>
          </template>
        </el-table-column>
      </c-page-table>
    </el-card>

    <component :is="dialog.tag" :data="dialog.data" @ok="resetPage"
               @close="dialog.tag = ''"/>
  </l-content>
</template>

<script>
import SDialogAdd from './comps/AirIssueRuleManager/SDialogAdd'
import SDialogEdit from './comps/AirIssueRuleManager/SDialogEdit'
import SDialogDetail from './comps/AirIssueRuleManager/SDialogDetail'

export default {
  name: 'AirIssueRuleManager',
  props: {
    app: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    SDialogAdd,
    SDialogEdit,
    SDialogDetail
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 50,
      airlineOptions: [],
      searchForm: {
        status: null,
        applyPolicyCodes: '',
        departDateStart: '',
        departDateEnd: '',
        airline: '',
        subClass: '',
        ruleName: '',
        departPort: '',
        arrivePort: ''
      },
      query: {
        page: 1,
        pageSize: 50
      },
      dialog: {
        tag: '',
        data: {
          id: ''
        }
      },
      canDeleteBatch: false,
      loading: false,
      tableData: {
        /* 表格数据固定写法 */
        records: 0,
        page: 1,
        total: 1,
        rows: []
      },
      multipleSelection: [] // 选中项
    }
  },
  created () {
    this.getSelectData()
    this.onSearch()
  },
  destroyed () {
    this.$message.closeAll() // 避免弹框会影响到新开的页面
  },
  watch: {
    // 通过监听选择项来判断批量删除按钮是否可用
    multipleSelection (val) {
      this.canDeleteBatch = val.length > 0
    }
  },
  methods: {
    onSearch () {
      // 把searchForm里面的值覆盖到paramForm里面去
      Object.assign(this.query, this.searchForm)
      this.query.page = 1
      this.refreshPage()
    },
    onSelectPage (page, size) {
      this.query.page = page
      this.query.pageSize = size
      this.refreshPage()
    },
    handleSortChange ({sidx, sord}) {
      // 排序设置
      this.query.sidx = sidx
      this.query.sord = sord
      this.refreshPage()
    },
    resetPage () {
      this.query.page = 1
      this.refreshPage()
    },
    refreshPage () {
      this.loading = true
      this.$service.airIssueRule.queryAirIssueRulePage(this.query).then(res => {
        this.tableData = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    handleEdit (row) {
      this.dialog.data.id = row.id
      this.dialog.tag = 'SDialogEdit'
    },
    handleDetail (row) {
      this.dialog.data.id = row.id
      this.dialog.tag = 'SDialogDetail'
    },
    handleDelete (btn, row) {
      this.$service.airIssueRule.deleteAirIssueRule(row.id).then(() => {
        this.refreshPage()
      }).finally(() => {
        btn.isLoading(false)
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    onMove (done, issueRuleId, sortNo, priType) {
      this.$service.airIssueRule.issueRulePrioritySet({issueRuleId, sortNo, priType}).then(() => {
        this.refreshPage()
      }).finally(done)
    },
    onAdd () {
      this.dialog.tag = 'SDialogAdd'
    },
    onDeleteBatch (btn) {
      if (this.multipleSelection.length > 0) {
        const ids = []
        for (let i = 0; i < this.multipleSelection.length; i++) {
          ids.push(this.multipleSelection[i].id)
        }
        this.$service.airIssueRule.batchDelete(ids).then(() => {
          this.refreshPage()
        }).finally(() => {
          btn.isLoading(false)
        })
      } else {
        this.$message({
          message: '没有选中项',
          type: 'warning'
        })
        btn.isLoading(false)
      }
    },
    getSelectData () {
      this.$service.options.getAirLineOption().then(res => {
        this.airlineOptions = res.data
      })
    },
    onChangeRuleStatus (row, status) {
      console.log(status)
      const map = {'0': '停用', '1': '启用'}
      this.$service.airIssueRule.updateRuleStatus({id: row.id, ruleStatus: status}).then(() => {
        row.ruleStatusStr = map[status]
      }).catch(() => {
        if (row.ruleStatus === '1') {
          row.ruleStatus = '0'
        } else {
          row.ruleStatus = '1'
        }
      })
    }
  }
}
</script>

<style></style>
